<template>
	<div :id="model.id" class="text warp"
		:class="[`text-${model.data.textAlign}`, `terminal${terminal}`]"
		:style="{backgroundColor:model.data.bgColor}">
		<div class="text-title" v-if="model.data.title" 
			:style="{ 
				'fontSize': `${model.data.fontSize}px`, 
				'fontWeight': model.data.fontWeight, 
				'color': model.data.fontColor,
				'lineHeight': model.data.lineHeight,
				'height': `${model.data.height}px`
			}">
			{{model.data.title}}
		</div>
	</div>
</template>

<script lang="ts">
	import { toRefs, reactive } from 'vue';
	export default {
		name: 'text-basics',
		props: {
			terminal: {
				type: Number,
				default: 1
			},
			model: {
				type: Object
			}
		},
		setup(props) {
			const state = reactive({
				terminal: props.terminal,
				model: props.model,
			});
			
			return {
				...toRefs(state),
			};
		}
	}
</script>

<style lang="scss" scoped>
	.text {
		position: relative;

		.text-title {
			white-space: pre-wrap;
		}

		&.text-left {
			text-align: left;
		}

		&.text-center {
			text-align: center;
		}

		&.text-right {
			text-align: right;
		}
	}
</style>
